import { Component } from "react"
import "./index.css"
import "../../common.css"

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentIndex: this.props.active
    }
  }

  liClick(index) {
    this.setState({
      currentIndex: index
    })
    this.props.onChange(index)
  }

  render() {
    const { list } = this.props
    const { currentIndex } = this.state
    return (
      <ul className="flex">
        {list.map((item, index) => {
          return (
            <li
              className="flex-center"
              key={item.name}
              onClick={() => {
                this.liClick(index)
              }}
            >
              <div className={`${index === currentIndex ? "active" : ""}`}>
                {item.name}
              </div>
            </li>
          )
        })}
      </ul>
    )
  }
}
